<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="bitbug_favicon.ico"> <!-- 小图标link:favicon -->
    <title>Document</title>
    <style>
        @font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1593168517326'); /* IE9 */
  src: url('iconfont.eot?t=1593168517326#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARUAAsAAAAACNAAAAQFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqFCIQRATYCJAMQCwoABCAFhG0HShuFBxEVnKfJvjjgTSyXN4C1E9xsJMRrwmsN+6aNhRepvc8ZyKZdCOsYTMzsRczoi3u3pqqsBUiQ2nIv1qCgmHehqbz1w+t9/3IX4OWB53L/1qRpcHb3PMFJURhgYIUQLS8O9GBuJLWrWX9rAuB/jpkurcHyA82pumk02hvguHVAkXElcnwHcoJ+w9jlRR4GAuAZc0TW6MRMrLH0UQRAjnU1ZVgnNNgKMsHJJQULY5ArFrhwDPMAYJL3++SPIuAAhlwEfWJqdVQlzs/VnwfRwbLDq4MAdzgTALYMoABHAAtkW2gpxyyIOKJ4ufucN4DDYWCoFt/nQTIZ4m1Fwhn/8gCKQYCk0CWKCOsZpfBc3eJEUl+oAgOlQZB3ARLWMXMgZ+McAH91nKbNJAiachKWlRR6KSpS1FSRavNDeAQFAgqxS4LZRiWqGCQwfD0rEF6uY+x1R1F8OSe9w1dcv/40HXDrGa3YpSPMmqUza672zJWaY8V4/xLhTHSV9jJpzIkbN/Mve2L6aoDR58az1YxVOrPI7ZJPUeocXc3pc7S0Mh+oM2+RvijS2JlzdXLWSQWlXddM6MKr3srbLxsyC654CeNmDJ6uyZ8Ub+lgIhW6A7P4eqTi2NO2mdMLFGfOHDJLaMo1WXzEqev8ujIbLPv7LFX9Nd4vRybLdr9weel53R7O01Xd93tlbxT1eOmyxw7PI/3y/QbFWbX0mCZWhxUrkbTGxjQSA5upHC6oqktUsvtw5ks/Pac9GhMGnFYVpYt+mldLG1yXrnFsmmTaTgrkERqqRqzPVBWaZ5Kvlwq7xKp8/Oxip7FS8b/kl28YjHMYphvaWHDadEboCAtx53qEI3HsFN7RmuzSiwlmDl6DqzkbrnpwuteZL+9p3Zu8/aWnK9koYcOj9KCbl+nonOyS3ndrD/dyk6AkOJYrQDFUWXdkAEB2nDV09mJvOMA8f4a/Qde++rUlKoHfuGEBAHcMvoyABbLBLHoBvFFuY+6r5zYsYRW+rmVjSWBxVC+rEO92HAPg8QAZcKi7P4RNCyITwXFcCAx5RkBxLJEs1hHkCDxBghMCPAcxywUa2jFDYgUA9kYAIFRtAoayQ0CpuoBksfdAjrZ3IKEaUOBlE40NBdYBwm2XwCRc4fUXnfK9NvWy9fMf2IwthTjfo7xwiM6PeZKl4yX3HIaYEr9MIaJRB9/hBRzHbetxCL5mJYkVGU5pqou+KFG+gy2WwCRc4fUXnfK9dirLNvPzD2zGlkJFUZn5hUN07WOeZA2QpaRvVHQpz8QvU4ho1MF3eAEmbo2Ix6G4X81KEtshNJxSVE43lSTTy7o7XAXAFvr7zEkKlTraaurNn7N+jJwX96vKUW9HWpxdb6oBAAAAAA==') format('woff2'),
  url('iconfont.woff?t=1593168517326') format('woff'),
  url('iconfont.ttf?t=1593168517326') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1593168517326#iconfont') format('svg'); /* iOS 4.1- */}
        
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 3470px;
            /* background-color: sandybrown; */
        }

        /* 头部 */
        .head{
            margin: auto;
            width: 1240px;
            height: 100px;
            background-color: white;
        }
        .zuo{
            width: 363px;
            height: 100px;
            float: left;
        }
        .you{
            width: 877px;
            height: 100px;
            float: right;
        }
        .logo{
            font-size: 60px;
            padding: 9px 0 0 85px;
            color: #0c53ad;
            margin-top: 24px;
        }
        ul{
            list-style: none;
        }
        li {
            float: left;
        }

        li a {
            display: inline-block;
            text-align: center;
            /* 文本居中：对齐 */
            text-decoration: none;
            padding: 35px 16px 0 16px;
            font-size: 18px;
        }

        li a:hover{
            height: 100px;
            background-color:#1040a8;
            color: white;
        }

        .diqiu{
            width: 100%;
            height: 374px;
        }

        /* 关于我们 */
        .gywm{ 
            margin: 0;
            padding: 0;
            /* background-color:slateblue; */
            margin: 0 auto;
            width: 1240px;
            height: 508px;
            
        }

        .left{
            float: left;
            padding: 77px 0 0 258px;
        }
        .right{
            float: right;
            padding: 77px  258px 0 0;
        }

        h1{
            padding-top: 55px;
            color: #333333;
        }

        /* 公司介绍 */
        .gsjs{
            width: 363px;
            height: 343px;
            margin: auto;
            background: url(letter.png) no-repeat;
            float: left;
            margin: 30px 0 0 40px;
        }
        

        .more{
            width: 800px;
            height: 274px;
            background-color: #f5f5f5;
            margin:0 0 80px 363px;
            display: inline-block;
            position:relative;
            left: 40px;
            bottom:274px ;
        }

        .fixed{
            position:relative;
            float: left;
            width: 180px;
            height: 80px;
            background-color: #1566c1;
            font-size: 30px;
            color: white;
            padding: 18px 0 0 24px; 
            box-sizing: border-box;   /* 盒子不被撑大 */
            bottom:50px ;
            right: 1px;
        }

        .gsjswz{
            position: absolute;
            margin-top: 50px;
            font-size: 19px;
            margin-left: 36px;
            line-height: 40px;
        }
        
        .lstiaoma{
            position:relative;
            width: 1163px;
            height: 5px;
            background-color: #1566c1;
            bottom: 359px;
            left: 40px;
        }

        .hs{
            position:relative;
            width: 77px;
            height: 33px;
            background-color: #e6c50e;
            float: right;
            top: 210px;
            right: 15px;
            color: white;
            font-size: 20px;
            box-sizing: border-box;
            padding: 2px 0 0 11px;
        }

        /* 产品展示 */
        .cpzs{
            position: absolute;
            width: 100%;
            height: 570px;
            background: url(product.png);
            margin-top: 70px;
            z-index: -3;
        }
        .mh{
            margin-top: 70px;
            position: absolute;
            width: 100%;
            height: 570px;
            background-color: rgba(0,0,0,0.3);
            z-index: -1;
        }

        .left1{
            margin-top: 50px;
            margin-left: 140px;
            float: left;
            padding: 63px 0 0 258px;
        }
        .right1{
            margin-top: 50px;
            margin-right: 145px;
            float: right;
            padding: 63px 258px 0 0;
        }

        .h1spzs{
            padding-top: 90px;
            color: white;
        }

        .tp{
            width: 264px;
            height: 334px;
            float: left;
            margin-top: 73px;
        }

        .tp:hover{
            transform:scale(1.1,1.1);
            box-shadow: 0 0 10px 1px black;
        }

        .t1{
            margin-left: 180px;
        }

        .t2{
            margin-right: 35px;
        }

        .djcx{
            width: 149px;
            height: 50px;
            background-color: rgba(0,0,0,0.3);
            border: 2px solid white;
            margin: 430px 0 0 45%;
        }
        .djcxa{
            color: white;
            text-decoration: none;
            font-size: 20px;
            padding: 11px 0 0 33px;
            display: inline-block;
        }

        /* 新闻中心 */
        .xwzx{
            width: 1240px;
            height: 640px;
            margin: auto;
            margin-top: 100px;
        }

        .left2{
            float: left;
            margin-top: 10px;
            margin-left: 110px;
            padding: 40px 0 0 150px;
        }

        .right2{
            float: right;
            margin-top: 50px;
            margin-right: 255px;
            padding: 40px 250p 0 0x;
        }

        .h1xwzx{
            box-sizing: border-box;
            position: absolute;
            left:600px;
            color: #333333;
            top: 1670px;
        }

        .xdt{
            float: left;
            width: 531px;
            height: 242px;
            background-color: #f5f5f5;
            margin-top: 30px;
        }
        .xdt1{
            margin-left: 40px;
        }

        .xdt2{
            float: right;
            margin-right: 70px;
        }

        .txm{
            position:relative;
            width: 27px;
            height: 54px;
            background-color: #1566c1;
            float: right;
            left: 40px;
        }

        .txm:hover{
            position:relative;
            width: 27px;
            height: 54px;
            background-color: #f5d306;
            float: right;
            left: 40px;
        }

        .txm a{
            box-sizing: border-box;
            font-size: 35px;
            text-decoration: none;
            color: white;
        }

        .xdt img{
            width: 236;
            height: 211px;
            background-color: black;
            margin: 17px 0 0 15px;
        }

        .xdttxm{
            position:relative;
            bottom: 215px;
            width: 275px;
            height: 220px;
            background-color:#f5f5f5;
            float: right;
        }
         
        .xdttxm h3,p{
            font-size: 17px;
            color: #333333;
            line-height: 30px;
        }

        .xdttxm p{
            margin-left: 3px;
        }

        /* 客户案例 */
        .khal{
            width: 100%;
            height: 626px;
            background-color: #f5f5f5;
        }

        .khal1{
            width: 1240px;
            height: 626px;
            background-color: #f5f5f5;
            margin: auto;
        }
        
        .h1khal{
            box-sizing: border-box;
            position: absolute;
            left:600px;
            color: #333333;
            top: 2310px;
        }

        .kj{
            position: absolute;
            width: 1240px;
            height: 526px;
            background-color: #f5f5f5;
            margin: auto;
            top: 2430px;
            left: 140px;
        }

        .tp2{
            width: 287px;
            height: 243px;
            background-color: #f5f5f5;
            float: left;
        }

        .tp2:hover{
        box-shadow: 0 0 10px 1px black;
        transform:scale(1.1,1.1);
        }

        .margin-left{
            margin-left: 45px;
        }

        /* 联系我们 */
        .lxwm{
            width: 1240px;
            height: 500px;
            margin: auto;
        }

        .h1lxwm{
            box-sizing: border-box;
            position: absolute;
            left: 600px;
            top: 2940px;
        }

        .lxwmkj{
            position: absolute;
            width: 1023px;
            height: 311px;
            background-color: #f5f5f5;
            left: 250px;
            top: 3070px;
        }

        .fk{
            width: 341px;
            height: 311px;
            background-color: #f5f5f5;
            float: left;
        }

        .dizhi{
            font-family: "iconfont";
            font-size: 91px;
            text-align: center;
            margin-top: 100px;
        }

        .dianhua{
            font-family: "iconfont";
            font-size: 91px;
            text-align: center;
            margin-top: 100px;
        }

        .liuyan{
            font-family: "iconfont";
            font-size: 91px;
            text-align: center;
            margin-top: 100px;
        }   
        
        .yw{
            font-size: 22px;
            color: #999999;
            text-align: center;
            margin: 40px;
        }

        .zw{
            font-size: 19px;
            color: #5a5a5a;
            padding: 0 0 120px 0;
            position: absolute;
            bottom: -40px;
            left: 85px;
        }

        .zw1{
            font-size: 19px;
            color: #5a5a5a;
            padding: 0 0 120px 0;
            position: absolute;
            bottom: -40px;
            left: 460px;
        }

        .zw2{
            font-size: 19px;
            color: #5a5a5a;
            padding: 0 0 120px 0;
            position: absolute;
            bottom: -60px;
            left: 787px;
        }

        /* 底部 */
        .bottom{
            width: 100%;
            height: 100px;
            background-color: #1566c1;
        }

        .logo1{
            font-size: 35px;
            color: white;
            padding-top: 36px;
            padding-left: 313px;
        }

        .banquan{
            position: absolute;
            font-size: 20px;
            color: white;
            left: 44%;
            top: 3500px;
            
        }
    </style>
</head>
<body>
    <div class="box">
    <!-- 头部 -->
        <div class="head">
            <div class="zuo">
                <p class="logo">LOGO</p>
            </div>
            <div class="you">
                <ul>
                    <li><a href="#">网站首页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">新闻中心</a></li>
                    <li><a href="#">产品展示</a></li>
                    <li><a href="#">客户案例</a></li>
                    <li><a href="#">给我留言</a></li>
                    <li><a href="#">人才招聘</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>

    <!-- 地球图片 -->
        <div class="diqiu">
            <img src="diqiu.png" alt="" width="100%">
        </div>

    <!-- 关于我们 -->
        <div class="gywm">
            <div>
                <img src="tiaoma.jpg" alt="" class="left">
                <img src="tiaoma.jpg" alt="" class="right">
                <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;关于我们</h1>
                <div class="gsjs"></div>
                    <div class="more">
                        <div class="fixed">公司介绍</div>
                        <div class="gsjswz">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首创并拥有 、通用考试答题卡完全知识产权的创新型公司，鋭意进取、睿智团<br>
                            结的精英团队，精于各行各业的各种调查问卷、民主测评、管理评估、绩效考核、投<br>
                            票选举、考试阅卷、网络阅卷等数据采集软件系统的研发和应用，是专业提供数据信<br>
                            息采集和处理的一站式解决方案的服务商<br>
                        </div>
                        <div class="hs">more</div>
                    </div>
                    
            </div>
            <div class="lstiaoma"></div>
        </div>

    <!-- 产品展示 -->
        <div class="mh"></div>
        <div class="cpzs"></div>
        <div><img src="tiaoma.jpg" alt="" class="left1">
            <img src="tiaoma.jpg" alt="" class="right1">
            <h1 class="h1spzs">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;产品展示</h1>
        <div class="tp t1 t2">
            <img src="exhibition_1.png" alt="">
        </div>

        <div class="tp t2">
            <img src="exhibition_2.png" alt="">
        </div>

        <div class="tp t2">
            <img src="exhibition_3.png" alt="">
        </div>

        <div class="tp t2">
            <img src="exhibition_4.png" alt="">
        </div></div>
        <div class="djcx">
            <a href="#" class="djcxa">点击查询</a>
        </div>

    <!-- 新闻中心 -->
        <div class="xwzx">
            <img src="tiaoma.jpg" alt="" class="left2">
            <img src="tiaoma.jpg" alt="" class="right2">
            <h1 class="h1xwzx">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;新闻中心</h1>
            <div class="xdt xdt1">
                <div class="txm"><a href="#">+</a></div>
                <img src="news_img_1.png" alt="">
                <div class="xdttxm">
                    <h3>选答题条形码</h3>
                    <p>&nbsp;&nbsp;首创并拥有 、通用考试答题卡完<br>
                        全知识产权的创新型公司，鋭意进<br>
                        取、睿智团 结的精英团队，精于各<br>
                        行各业的各种调查问卷、民主测评<br>
                        、管理评估、绩效考核、投票选举、<br>
                        考试阅卷、网络阅卷等。</p>
                </div>
            </div>

            <div class="xdt xdt2">
                <div class="txm"><a href="#">+</a></div>
                <img src="news_img_2.png" alt="">
                <div class="xdttxm">
                    <h3>选答题条形码</h3>
                    <p>&nbsp;&nbsp;首创并拥有 、通用考试答题卡完<br>
                        全知识产权的创新型公司，鋭意进<br>
                        取、睿智团 结的精英团队，精于各<br>
                        行各业的各种调查问卷、民主测评<br>
                        、管理评估、绩效考核、投票选举、<br>
                        考试阅卷、网络阅卷等。</p>
                </div>
            </div>

            <div class="xdt xdt1">
                <div class="txm"><a href="#">+</a></div>
                <img src="news_img_3.png" alt="">
                <div class="xdttxm">
                    <h3>选答题条形码</h3>
                    <p>&nbsp;&nbsp;首创并拥有 、通用考试答题卡完<br>
                        全知识产权的创新型公司，鋭意进<br>
                        取、睿智团 结的精英团队，精于各<br>
                        行各业的各种调查问卷、民主测评<br>
                        、管理评估、绩效考核、投票选举、<br>
                        考试阅卷、网络阅卷等。</p>
                </div>
            </div>

            <div class="xdt xdt2">
                <div class="txm"><a href="#">+</a></div>
                <img src="news_img_4.png" alt="">
                <div class="xdttxm">
                    <h3>选答题条形码</h3>
                    <p>&nbsp;&nbsp;首创并拥有 、通用考试答题卡完<br>
                        全知识产权的创新型公司，鋭意进<br>
                        取、睿智团 结的精英团队，精于各<br>
                        行各业的各种调查问卷、民主测评<br>
                        、管理评估、绩效考核、投票选举、<br>
                        考试阅卷、网络阅卷等。</p>
                </div>
            </div>
        </div>
        
        <!-- 客户案例 -->
        <div class="khal">
            <div class="khal1">
                <div><img src="tiaoma.jpg" alt="" class="left2">
                    <img src="tiaoma.jpg" alt="" class="right2">
                    <h1 class="h1khal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;客户案例</h1>
                 </div>
            </div>
         </div>
         <div class="kj">
            <div class="tp2  margin-left"><img src="demo_1.png" alt=""></div>
            <div class="tp2"><img src="demo_2.png" alt=""></div>
            <div class="tp2"><img src="demo_3.png" alt=""></div>
            <div class="tp2"><img src="demo_4.png" alt=""></div>
            <div class="tp2 margin-left"><img src="demo_5.png" alt=""></div>
            <div class="tp2"><img src="demo_6.png" alt=""></div>
            <div class="tp2"><img src="demo_7.png" alt=""></div>
            <div class="tp2"><img src="demo_8.png" alt=""></div>
        </div>

        <!-- 联系我们 -->
        <div class="lxwm">
            <div>
                <img src="tiaoma.jpg" alt="" class="left2">
                    <img src="tiaoma.jpg" alt="" class="right2">
                    <h1 class="h1lxwm">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;联系我们</h1>
            </div>
            <div class="lxwmkj">
                <div class="fk">
                    <p class="dizhi">&#xe63d;</p>
                    <p class="yw">ADRESS</p>
                    <p class="zw">地址：广州南洋理工</p>
                </div>

                <div class="fk">
                    <p class="dianhua">&#xe638;</p>
                    <p class="yw">TELL</p>
                    <p class="zw1">电话：233233</p>
                </div>

                <div class="fk">
                    <p class="liuyan">&#xe612;</p>
                    <p class="yw">MESSAGE</p>
                    <p class="zw2">你有什么问题请<br>在线留言</p>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <div class="bottom">
            <p class="logo1">LOGO</p>
            <p class="banquan">版权所有| 熊猫有限公司</p>
        </div>

    </div>
</body>
</html>